<template>
  <div class="mains">
    <div style="width: 100%;min-height: 95vh;" class="univ-home-wrapper">
      <headerBack :hasBack="hasBack" @btnclick="commonJs.gopush('../yxk/search')">
        <b class="my-center" slot="my-center">找院校</b>
        <span class="my-right" slot="my-right"></span>
      </headerBack>
      <div class="first-words" ref="tabe" :style="stySty">页面数据加载成功</div>
      <collage ref="collageChild" :items1="areaData" v-on:listenToChild="showMsgFromSec1"></collage>
      <scroller style="top: 1.68rem;" :on-refresh="refresh" :on-infinite="infinite" ref="scrollerBottom" class="my-scroller">
        <div style="width: 7.5rem;height: auto;">
          <univBox :univData="newsDataList"></univBox>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { getRanking, academyServicepageList } from '~/api/colleges'
import ls from 'store2'
import univBox from './components/univBox'
import headerBack from '~/components/headerBack'
import collage from '~/components/Collage'
import { Loading } from 'vux'
export default {
  components: {
    Loading,
    univBox,
    collage,
    headerBack,
  },
  data() {
    return {
      hasBack: true,
      stySty: '',
      options: {
        provinceIds: [],
        attrs: [],
        labels: [],
        levels: [],
        opsort: 'combined',
        batchs: [],
      },
      showBannerData: [],
      articleInfoList: [],
      bottomCount: 1,
      userArea: '',
      userids: 0,
      pageCount: 0,
      typeid: 0,
      areaData: [],
      univsData: [],
      newsDataList: [],
      flag: false,
      ayee: [],
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('outer') || this.commonJs.GetUrlParam('mini_token')) {
      this.hasBack = false
      let yxkData = {
        userId: this.commonJs.GetUrlParam('userId'),
        userVoId: this.commonJs.GetUrlParam('userVoId'),
      }
      ls.set('yxkData', yxkData)
      ls.set('userType', this.commonJs.GetUrlParam('userType'))
      ls.set('userVoId', this.commonJs.GetUrlParam('userVoId'))
      ls.set('tokensyxk', this.commonJs.GetUrlParam('mini_token'))
      ls.set('userArea', decodeURI(this.commonJs.GetUrlParam('userArea')))
      sessionStorage.setItem('outer', 'smallProgram')
    }

    let localData = JSON.parse(sessionStorage.getItem('yxkListData'))
    let optins = JSON.parse(sessionStorage.getItem('options'))
    if (optins) {
      this.options = optins
    } else {
      this.options.provinceIds[0] = ls.get('userArea')
    }
    if (localData && ls.get('userArea')) {
      this.newsDataList = localData
      this.bottomCount = sessionStorage.getItem('yxkCount') * 1
      this.userArea = ls.get('userArea')
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm && vm.$refs.scrollerBottom) {
        //通过vm实例访问this
        setTimeout(function() {
          vm.$refs.scrollerBottom.scrollTo(0, vm.$store.state.recruitScrollY1, false)
        }, 0) //同步转异步操作
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    var _this = this
    if (ls.get('tokensyxk') && ls.get('yxkData')) {
      let scrolly = this.$refs.scrollerBottom.getPosition().top
      this.$store.commit('changeRecruitScrollY1', scrolly)
    }
    sessionStorage.setItem('yxkListData', JSON.stringify(this.newsDataList))
    sessionStorage.setItem('yxkCount', this.bottomCount)
    ls.set('preUrl', '../yxk/univ')
    next()
  },
  mounted() {
    this.$visit('AcademyList')
    this.$refs.collageChild.showBatch()
  },
  methods: {
    showMsgFromSec1(data) {
      this.options = data
      this.bottomCount = 1
      this.$refs.scrollerBottom.scrollTo(0, 0, false)
      this.$loading('open')
      sessionStorage.setItem('options', JSON.stringify(this.options))
      setTimeout(() => {
        this.showUnivList(this.options)
      }, 40)
    },
    showNews() {
      var _this = this
      getRanking()
        .then((res) => {})
        .catch((error) => {
          _this.$vux.toast.text('暂无数据')
        })
    },
    async showUnivList(datas) {
      this.flag = true

      let option = datas || this.options
      let _this = this
      await academyServicepageList({
        pageNo: this.bottomCount,
        pageSize: 10,
        provinceIds: option.provinceIds,
        attrs: option.attrs,
        labels: option.labels,
        levels: option.levels,
        sort: option.opsort,
        province: ls.get('userArea'),
        fromUserId: ls.get('yxkData').userId,
        batchs: option.batchs,
        year: 2019,
      })
        .then((res) => {
          this.len = Math.ceil(res.data.total / res.data.pageSize)

          if (this.bottomCount == 1) {
            this.newsDataList = res.data.list
          } else {
            this.univsData = res.data.list
            this.univsData.forEach((item) => {
              this.newsDataList.push(item)
            })
          }
          if (res.data.list.length === 0) {
            this.flag = true
            this.onFetching = true
          } else {
            this.flag = false
            this.onFetching = false
          }
          this.$hideLoading()
        })
        .catch((error) => {
          this.$hideLoading()
        })
      return this.flag
    },

    ssr11() {
      this.sp = !this.sp
    },
    onScroll(pos) {
      this.scrollTop = pos.top
    },
    showLoading() {
      this.$loading('open')
      setTimeout(() => {
        this.$hideLoading()
      }, 2000)
    },

    async infinite(done) {
      if (this.onFetching) {
        // do nothing
        if (this.bottomCount > this.len) {
          setTimeout(() => {
            done(true)
          }, 3000)
          return
        }
      } else {
        this.onFetching = true
        setTimeout(() => {
          if (this.bottomCount > this.len) {
            setTimeout(() => {
              done(true)
            }, 3000)
            return
          }
        }, 2000)
        this.flag = await this.showUnivList()
        if (!this.flag) {
          this.bottomCount += 1
        }
        setTimeout(() => {
          done()
        }, 2000)
      }
    },
    refresh(done) {
      setTimeout(() => {
        this.onFetching = false
        this.stySty = 'z-index:10000;opacity: 1;'
        let _this = this
        setTimeout(() => {
          _this.stySty = 'z-index:-1;opacity: 0;'
        }, 2000)

        done()
      }, 1500)
    },
  },
}
</script>

<style lang="less">
.univ-home-wrapper {
  .first-words {
    width: 100%;
    height: 0.8rem;
    background: #ffad0d;
    position: absolute;
    z-index: -1;
    opacity: 0;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.3rem;
    color: #fff;
    left: 0;
    top: 1.68rem;
  }

  .my-center {
    font-weight: 600;
  }
  .my-right {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    text-align: right;
    background: url('~@/static/sprite/other_sprites.png') -1.96rem -2.2rem;
    background-size: 4.68rem 4.08rem;
  }

  .demo1-item {
    border: 1px solid #ececec;
    border-radius: 2px;
  }

  .demo1-item-selected {
    border: 1px solid @mainColor;
    border-radius: 2px;
    color: @mainColor;
  }
}
.mains {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}
</style>
